{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .performance {
            width: 100%;height: 40px;line-height: 40px;padding-left: 10px;border-bottom: #999999 dashed 1px;cursor: pointer;
        }
        .performance_active {
            background: #2db7f5;color: white;border-bottom: #2db7f5 dashed 1px;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        #page-footer {
            float: right;height: 40px;padding-top: 5px;text-align: right;padding-right: 2%;
        }
        .regular {
            display: inline-block;vertical-align: top;width: 60px;border-radius: 3px;background: white;border: #cfcfcf solid 1px;height: 30px;line-height: 29px;text-align: center;cursor: pointer;
        }
        .page-list div:hover {
            background: #cfcfcf;color: #0b0b0b;
        }
        .footer-active {
            width: 30px;height: 30px;line-height: 29px;border: #1890ff solid 1px;text-align: center;border-radius: 3px;cursor: pointer;display: inline-block;vertical-align: top;background: #1890ff;color: white;
        }
        .footer {
            width: 30px;height: 30px;line-height: 29px;border: #cfcfcf solid 1px;text-align: center;border-radius: 3px;cursor: pointer;background: white;display: inline-block;vertical-align: top;
        }
        .regular:hover {
            background: #cfcfcf;
        }
        .table_wrap {
            width: 100%;height: 95.2%;overflow: auto;border: #cecece solid 1px;border-left: none;
        }
        .table_wrap table {
            width: 100%;border-collapse: collapse;
        }
        #table td {
            height: 35px;line-height: 35px;border: #cecece solid 1px;font-size: 12px;
        }
        #table thead tr th {
            position: sticky;top: 0;background: #EEEEEE;text-align: center;height: 35px;line-height: 35px;border-right: #cecece solid 1px;border-left: #cecece solid 1px;font-size: 12px;font-weight: normal;
        }
        #table th:last-child,
        #table td:last-child {
            position: sticky;text-align: center;right: 0;width: 100px;background: white;box-shadow: -5px 0 5px #b81900;
        }
        #table tbody tr:nth-child(odd) {
            background: #F7F7F7;
         }
        #table tbody tr:hover {
            background: #EFFBFE;
        }
        #table th:last-child {
            z-index: 3;background: #F4F4F5;
        }
        #table .shadow-right th:last-child::after,
        #table .shadow-right td:last-child::after {
            content: "";position: absolute;top: 0;width: 10px;height: 100%;left: -10px;background: linear-gradient(to left, #cfcfcf, transparent);
        }
        .text-version {
            width: 100%;text-align: center;padding-left: 3px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 15%;height: 95%;margin-top: 1.25%;display: inline-block;vertical-align: top;background: white;border: #cfcfcf solid 1px;margin-left: 1%;">
        <div onclick="choose_performance_type(this, 1)" class="performance">
            我添加的
        </div>
        <div onclick="choose_performance_type(this, 2)" class="performance">
            我负责的
        </div>
        <div onclick="choose_performance_type(this, 3)" class="performance performance_active">
            我协助的
        </div>
    </div>

    <div style="width: 82%;height: 95%;margin-top: 1.25%;display: inline-block;vertical-align: top;background: white;border: #cfcfcf solid 1px;margin-left: 0.5%;">
        <div style="width: 100%;height: 100%;" id="performance_allocation">
            <div class="table_wrap">
                <table id="table" style="{% if not DailyList|length %}height: 100%;{% endif %}">
                    <thead>
                        <tr id="thead-title">
                            <th style="width: 50px;background: #EEEEEE;border-left: none;">序号</th>
                            <th style="width: 150px;">标题</th>
                            <th style="width: 300px;">责任科室</th>
                            <th style="width: 100px;">负责人</th>
                            <th style="width: 200px;">开始时间</th>
                            <th style="width: 200px;">结束时间</th>
                            <th style="width: 100px;background: #EEEEEE;border-right: none;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if DailyList|length %}
                            {% for datum in DailyList %}
                                <tr>
                                    <td title="{{ datum.Serial }}" style="border-left: none;"><div class="text-version">{{ datum.Serial }}</div></td>
                                    <td title="{{ datum.title }}"><div class="text-version">{{ datum.title }}</div></td>
                                    <td title="{{ datum.company }}"><div class="text-version">{{ datum.company }}</div></td>
                                    <td title="{{ datum.responsible_person }}"><div class="text-version">{{ datum.responsible_person }}</div></td>
                                    <td title="{{ datum.start_time }}"><div class="text-version">{{ datum.start_time }}</div></td>
                                    <td title="{{ datum.end_time }}"><div class="text-version">{{ datum.end_time }}</div></td>
                                    <td style="border-right: none;"><div class="text-version" style="cursor: pointer;" onclick="views_detail('{{ datum.id }}')">查看</div></td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr style="width: 100%;height: 100%;">
                                <td colspan="9" style="width: 100%;height: 100%;text-align: center;line-height: 100%;">
                                    暂无数据
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>

            <div style="width: 100%;height: 40px;background: #EEEEEE;border: #cfcfcf solid 1px;border-top: none;border-left: none;">
                <div style="float: left;height: 40px;padding-top: 5px;width: 40%;">
                    <div style="display: inline-block;vertical-align: top;height: 30px;line-height: 30px;padding-left: 3%;font-size: 12px;">
                        此页显示 {{ views_range_start }}-{{ views_range_end }} 条 &nbsp;&nbsp;&nbsp;共 {{ totals }} 条
                    </div>
                </div>
                <div id="page-footer">
                    <div style="display: inline-block;vertical-align: top;text-align: right;">
                        {% if pages > 1 %}
                            <div class="regular" onclick="change_page_size(1)">首页</div>
                            <div class="regular" onclick="change_page_size({{ pages }} - 1)">上一页</div>
                        {% else %}
                            <div class="regular" style="cursor: no-drop;">首页</div>
                            <div class="regular" style="cursor: no-drop;">上一页</div>
                        {% endif %}
                    </div>

                    <div class="page-list" style="display: inline-block;vertical-align: top;">
                        {% for page in page_list %}
                            {% if pages == page %}
                                <div onclick="change_page_size({{ page }})" class="footer-active">{{ page }}</div>
                            {% else %}
                                <div onclick="change_page_size({{ page }})" class="footer">{{ page }}</div>
                            {% endif %}
                        {% endfor %}
                    </div>

                    <div style="display: inline-block;vertical-align: top;text-align: right;">
                        {% if page_all_number > pages %}
                            <div class="regular" onclick="change_page_size({{ pages }} + 1)">下一页</div>
                            <div class="regular" onclick="change_page_size({{ page_all_number }})">尾页</div>
                        {% else %}
                            <div class="regular" style="cursor: no-drop;">下一页</div>
                            <div class="regular" style="cursor: no-drop;">尾页</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="job_detail" class="shade">
        <div id="job_models" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 800px;background: white;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="job_models_title" style="width: 100%;height: 40px;background: white;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom: #cfcfcf solid 1px;">
                    <h6 class="modal-title" style="line-height: 40px;width: 35%;margin-left: 1%;display: inline-block;">详情</h6>
                    <span onclick="close_job_detail()" style="float: right;line-height: 40px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
                </div>

                <div style="width: 100%;border-bottom: #cfcfcf solid 1px;padding-bottom: 20px;padding-left: 3%;margin: 0;">
                    <table style="width: 94%;margin-top: 10px;">
                        <tr>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">标题</td>
                            <td colspan="3" style="width: 90%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="title_detail"></td>
                        </tr>
                        <tr>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">责任科室</td>
                            <td style="width: 40%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="company_detail"></td>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">责任人</td>
                            <td style="width: 40%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="responsible_person_detail"></td>
                        </tr>
                        <tr>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">开始时间</td>
                            <td style="width: 40%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="start_time_detail"></td>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">结束时间</td>
                            <td style="width: 40%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="end_time_detail"></td>
                        </tr>
                        <tr>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">协作科室</td>
                            <td colspan="3" style="width: 90%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="collaboration_detail"></td>
                        </tr>
                        <tr>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">工作描述</td>
                            <td colspan="3" style="width: 90%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="job_description_detail"></td>
                        </tr>
                        <tr>
                            <td style="width: 10%;height: 35px;border: #DFDFDF solid 1px;background: #F5F5F5;padding-left: 3px;color: #999999;">备注</td>
                            <td colspan="3" style="width: 90%;height: 35px;border: #DFDFDF solid 1px;padding-left: 3px;" id="note_detail"></td>
                        </tr>

                        <tr>
                            <td colspan="4" style="width: 100%;height: 50px;border: none;"></td>
                        </tr>
                        <tr>
                            <td colspan="4" style="width: 100%;height: 40px;line-height: 40px;text-align: center;"><h3>工作进展</h3></td>
                        </tr>
                    </table>
                    <table id="detail_body" style="width: 94%;">

                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script src="../../static/system_setup/creat_from/js/jquery-1.10.2.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("supervision_inspection_management").className = "add-nav-active";
        };

        function choose_performance_type(ele, type_number) {
            var performance_obj = document.getElementsByClassName("performance");
            for (var i=0; i<performance_obj.length; i++) {
                performance_obj[i].className = "performance";
            }
            ele.className = "performance performance_active";

            if (type_number === 1) {
                window.location.href = "daily_work_list.html";
            }else if (type_number === 2) {
                window.location.href = "my_responsible.html";
            }else {
                window.location.href = "my_assistance.html";
            }
        }

        let job_models_title = document.querySelector("#job_models_title");
        let job_models = document.querySelector("#job_models");

        job_models_title.addEventListener("mousedown", function (e) {
            let x = e.pageX - job_models.offsetLeft;
            let y = e.pageY - job_models.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                job_models.style.left = e.pageX - x + 'px';
                job_models.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function views_detail(flow_id) {
            var form = new FormData();
            form.append("id", flow_id)
            document.getElementById("loading").style.display = "inline-block";
            document.getElementById("job_detail").style.display="table-row";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/supervision-inspection/daily_work_detail", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        document.getElementById("title_detail").innerText = JsonDate["obj_detail"]["title"];
                        document.getElementById("company_detail").innerText = JsonDate["obj_detail"]["company"];
                        document.getElementById("responsible_person_detail").innerText = JsonDate["obj_detail"]["responsible_person"];
                        document.getElementById("start_time_detail").innerText = JsonDate["obj_detail"]["start_time"];
                        document.getElementById("end_time_detail").innerText = JsonDate["obj_detail"]["end_time"];
                        document.getElementById("collaboration_detail").innerText = JsonDate["obj_detail"]["collaboration"];
                        document.getElementById("job_description_detail").innerText = JsonDate["obj_detail"]["job_description"];
                        document.getElementById("note_detail").innerText = JsonDate["obj_detail"]["note"];

                        for (var i=0; i<JsonDate["FeedbackList"].length; i++) {
                            var html_str = `
                                <tr style="width: 100%;">
                                    <td style="width: 25%;height: 50px;border: #DFDFDF solid 1px;text-align: center;">`+JsonDate["FeedbackList"][i]["time"]+`</td>
                                    <td style="width: 25%;height: 50px;border: #DFDFDF solid 1px;text-align: center;font-size: 18px;"><strong>`+JsonDate["FeedbackList"][i]["name"]+`</strong></td>
                                    <td style="width: 50%;height: 50px;border: #DFDFDF solid 1px;padding-left: 1%;">`+JsonDate["FeedbackList"][i]["audit_note"]+`</td>
                                </tr>
                            `
                            $("#detail_body").append(html_str);
                        }
                    }
                }
            };
        }

        function close_job_detail() {
            document.getElementById("job_detail").style.display = "none";
        }

    </script>
{% endblock %}
